<template>
	<view class="hotgood">
		<view class="h2">热门推荐</view>
		<view class="hotgood-nav">
			<block v-for="(item,index) in hotGoodsList"  @click="shopdetails(item.id)">
			<u-line length="98%"></u-line>
			<view class="ul">
				<view class="li" >
				<view class="hotgood-img">
					<image :src="item.picUrl" ></image>
				</view>	
					<view class="hotgood-font">
						<view class="hotgood-title">
							{{item.name}}
						</view>
						<view class="hotgood-text">
							{{item.brief}}
						</view>
						<view class="hotgood-price">
							￥{{item.retailPrice}}
						</view>
					</view>
				</view>
			</view>
		</block></view>
	</view>
</template>

<script>
	export default {
		props:{
			hotGoodsList:{
				type:Array
			}
		},
		data() {
			return {
			
			}
		},
		methods: {
			shopdetails(e){
				uni.navigateTo({
				    url: '../../pages/shopdetails/shopdetails?id='+e
				});
			}
		},
	}
	
</script>

<style lang="scss" scoped>
	$marginBottom: 30rpx;
	$backColor: #f4f4f4;
	@import 'uview-ui/index.scss';
	.hotgood {
		margin-top: $marginBottom;
		background-color: $uni-bg-color;
	
		.h2 {
			text-align: center;
			font-size: 40rpx;
			padding: $marginBottom;
			line-height: 60px;
		}
		.hotgood-nav{
			padding: 0rpx 20rpx;
			
			.ul{
			.li{
				margin: 0 auto;
				margin-bottom: 30rpx;
				.hotgood-img{
					margin: 0 auto;
					text-align: center;
				}
				.hotgood-font{
					text-align: center;
				.hotgood-title{
					margin-bottom: 20rpx;
				}
				.hotgood-text{
					font-size: 25rpx;
					margin-bottom: 20rpx;
				}
				.hotgood-price{
					margin-bottom: 20rpx;
					color: #eb7153;
				}
				}
			}
			}
		}
		}
</style>
